<template>
    <div>
      <grid-layout
        :layout.sync="testLayout1"
        :col-num="12"
        :row-height="30"
        :is-draggable="true"
        :is-resizable="true"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
      >

        <grid-item v-for="item in testLayout1"

                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   :key="item.i">
          <div style="height: 100%;width: 100%;background-color: red;position: fixed">

            {{item.i}}
          </div>
        </grid-item>
      </grid-layout>

    </div>
</template>

<script>

  import VueGridLayout from 'vue-grid-layout';

  var testLayout1 = [
    {"x": 0, "y": 0, "w": 6, "h": 6, "i": "3"},
  ];


  export default {
        name: "",
    components: {
      GridLayout: VueGridLayout.GridLayout,
      GridItem: VueGridLayout.GridItem
    },
    data() {
      return {
        testLayout1,
      };
    },

    }
</script>

<style scoped>

</style>
